<template>
	<view>
		<view class="zujulists">
			<view class="zujulist " v-for="(item,index) in list">
				<view class="flex zujulist_box">
					<view class="zujulist_l">
						<image :src="item.image" mode="" class="zujulist_l_image"></image>
					</view>
					<view class="zujulist_r">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time flex">
							<u-icon size="15" name="clock"></u-icon>
							{{item.time}}
						</view>
						<view class="address flex">
							<u-icon size="15" name="map"></u-icon>
							{{item.address}}
						</view>
						<view class="address flex">
							<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="34rpx" height="34rpx"
								shape="circle"></u--image>
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="zuju_group flex">
					<view class="zuju_group_l flex">
						<u-avatar-group :urls="urls" size="28" gap="0.8"></u-avatar-group>
						<view class="address">
							10人上车
						</view>
					</view>

					<view class="zuju_group_r" v-if="type==1" @click="todetial(item)">
						立即上车
					</view>
					<view class="zuju_group_r" v-if="type==2" @click="tocode('1234')">
						查看签到码
					</view>
					<view class="zuju_group_r" v-if="type==2" @click="todetial(item)">
						查看详情
					</view>
				</view>

			</view>


		</view>

	</view>
</template>

<script>
	export default {
		name: "zuju_box",
		props: {
			//父组件传来的值需定义一下
			list: {
				type: Array, //类型
			},
			urls: {
				type: Array, //类型
			},
			type: {
				type: String, //类型
			},


		},
		data() {
			return {
				// urls: [
				// 	'https://cdn.uviewui.com/uview/album/1.jpg',
				// 	'https://cdn.uviewui.com/uview/album/2.jpg',
				// 	'https://cdn.uviewui.com/uview/album/3.jpg',
				// 	'https://cdn.uviewui.com/uview/album/4.jpg',
				// 	'https://cdn.uviewui.com/uview/album/7.jpg',
				// 	'https://cdn.uviewui.com/uview/album/6.jpg',
				// 	'https://cdn.uviewui.com/uview/album/5.jpg'
				// ],
				// list: [{

				// 	title: 'IGS. “资本1+1’ 游戏行',
				// 	time: '2024-04-30 08:00',
				// 	address: '云南省昆明市西山区',
				// 	avatar: '../../static/icons/tou.png',
				// 	image: '../../static/icons/h3.png',
				// 	name: '凌柒',
				// 	dec: '2020年5月29日前无发文的教育新作者，报名参与本计划、完整填写问卷信息',
				// 	price: '1.00'
				// }, {
				// 	title: '美食大作战',
				// 	time: '2024-03-30 08:00',
				// 	address: '河南省郑州市高新区',
				// 	avatar: '../../static/icons/tou.png',
				// 	image: '../../static/icons/h2.png',
				// 	name: '凌柒1',

				// 	dec: '2020年5月29日前无发文的教育新作者，报名参与本计划、完整填写问卷信息',
				// 	price: '2.00'
				// }, {
				// 	title: '王者荣耀官方年度对抗赛',
				// 	time: '2024-04-03 08:00',
				// 	address: '山西省吕梁市高新区',
				// 	avatar: '../../static/icons/tou.png',
				// 	image: '../../static/icons/h1.png',
				// 	name: '凌柒2',
				// 	dec: '2020年5月29日前无发文的教育新作者，报名参与本计划、完整填写问卷信息',
				// 	price: '2.50'
				// }],
			};
		},
		methods: {
			click(e) {
				console.log(e)
				this.tabsIndex = e.index
				this.page = 1
				this.suo = true
				// this.twoDynamic()
			},
			todetial(item) {
				const params = (JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/zuju/zujudetail?params=${params}`
				})
			},
			tocode(code) {
				uni.showModal({
					content: '签到码为：' + code,
					success: (res) => {

					}
				})
			}
		}
	}
</script>

<style>
	.zuju {

		/* margin-top: -30rpx; */
		border-radius: 50rpx 50rpx 0 0;
		padding: 10rpx;
		background-color: #fff;
	}

	.zujulist {
		/* width: 100%; */
		/* height: 300rpx; */
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

	}

	.zujulist_box {
		margin-bottom: 10rpx;
	}

	.zujulist_l {
		margin-right: 20rpx;
	}

	.zujulist_l_image {
		width: 300rpx;
		height: 240rpx;
		border-radius: 20rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
	}

	.time {
		font-size: 30rpx;
		color: #666666;
		margin: 10rpx 0;
	}

	.address {
		font-size: 30rpx;
		color: #666666;
		margin: 10rpx 0;
	}

	.zuju_group {
		/* padding: 10rpx;'' */
		padding-top: 30rpx;
		border-top: 2rpx solid #eee;
		justify-content: space-between;
	}

	.zuju_group_r {
		margin-right: 10rpx;
		text-align: center;
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #A973FF;
		border-radius: 60rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>